import React from 'react'
import { Form, Input, Select, DatePicker, message, Row, Col, Button } from "antd"
import { useSelector, useDispatch } from "umi";
import DropPopover from "@/components/DropPopover"
import attendanceLists from "@/staticLists/addendanceList";
import { attendanceRule } from "@/utils/rules";
import { createOption } from "@/utils/selectOption";
import { mapData } from "@/utils/mapData";
import $http from "@/services";
import moment from 'moment';
export default function index({ _initContentPage, setIsShowAdd }) {
    const [form] = Form.useForm();
    const dispatch = useDispatch();
    // 节点的创建
    const AttendanceNode = {
        popover(item) {
            return <Input
                readOnly
                className="border-color"
                placeholder={item.initVal}
                addonAfter={<DropPopover
                    searchType={item.type}
                    getnewValue={(item) => {
                        form.setFieldsValue({
                            staffNameVal: item.userName,
                            staffName: item._id
                        })
                    }} interfaced={item.url}
                    placeValue={item.labelTxt}></DropPopover>}
            ></Input>
        },
        date(item) {
            return <DatePicker style={{ width: "100%" }} ></DatePicker>
        },
        select(item) {
            return <Select options={createOption(mapData[item.itemName])}></Select>

        }
    }

    const creanteAttendance = async (resObj) => {
        const staffName = form.getFieldValue('staffName');
        resObj = { ...resObj, staffName };
        delete resObj.staffNameVal;
        // 请求
        const { data, msg, code } = await $http.createAttendance(resObj);
        if (code) return message.error(msg);
        // 成功处理
        message.success(msg);
        _initContentPage();
        setIsShowAdd(false);

    }

    return (
        <Form onFinish={creanteAttendance} layout='vertical' form={form}>
            {attendanceLists.map((el, index) => {
                return (<Row justify={'space-between'} key={index}>
                    {el.map((item, childIndex) => {
                        return <Col span="11" key={childIndex}>
                            <Form.Item name={item.itemName} label={item.labelTxt} rules={attendanceRule[item.itemName]}>
                                {AttendanceNode[item.renderType](item)}
                            </Form.Item>
                        </Col>
                    })}
                </Row>)
            })}
            <Row justify={"end"}>
                <Col><Button type='primary' htmlType='submit'>创建</Button></Col>
            </Row>
        </Form>
    )
}
